<template>
    <div>
        <!-- 地图容器 -->
         <div id="main" style="height:200px; border:1px solid #666;"></div>
         <el-divider content-position="left">电影院列表</el-divider>


         <!-- 表格 -->
            <el-table :data="cinemas">
            <el-table-column prop="cinema_name" width="280px" label="影院名称"></el-table-column>
            <el-table-column prop="address" label="影院地址"></el-table-column>
            <el-table-column width="250px" label="影院位置" sortable>
            <template slot-scope="scope">
                {{scope.row.city}} {{scope.row.district}}
            </template>
            </el-table-column>
            <el-table-column width="180px" label="操作">
            <template slot-scope="scope">
            <el-button
            @click="moveTo(scope.row)"
             type="success" icon="el-icon-check" circle></el-button>
            <el-button
            @click="$router.push('/home/cinema-room-List/'+scope.row.id)"
             type="info" icon="el-icon-message" circle></el-button>
            <el-button
            @click="$router.push('/home/cinema-add/'+scope.row.id)"
                type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button
            @click="deleteItem(scope.row)"
            type="danger"
                icon="el-icon-delete" circle>
            </el-button>
            </template>
            </el-table-column>
            </el-table>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import httpApi from '@/http'
    export default {
        data() {
            return {
                cinemas:[], //  存储列表
                map: null,  // 地图对象
                AMap:null
            }
        },
         methods: {

          /**移动到移动到地图某一个位置 */
            moveTo(cinema){
              console.log(cinema)
              let lnt = cinema.longitude   //  当前电影院的经度
              let lat = cinema.latitude    //  当前电影院的纬度
               // 将地图的中心位置移动到该经纬度的位置
              this.map.setZoomAndCenter(15, [lnt, lat], false, 700)
            },
            deleteItem(e){
                console.log(e)
                 this.$confirm('此操作将永久删除电影, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          httpApi.cinemaApi.del({id:e.id}).then(res=>{
          console.log('删除了',res)
          if(res.data.code==200){
            this.initData()
          }
        })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
            },

            initData(){
                httpApi.cinemaApi.queryAll().then(res=>{
                    console.log('电影院列表',res)
                    this.cinemas=res.data.data
                    // 此处可以为每一家电影院都添加一个点标记到地图上
                    this.cinemas.forEach(item=>{
                      let lng=item.longitude
                      let lat=item.latitude
                      // 向地图添加一个点标记
                      var marker = new this.AMap.Marker({
                      position: new this.AMap.LngLat(lng, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                      title: item.cinema_name
                    });
                    this.map.add(marker)
                    })

                })
            },

    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "17036be2d5ab1ea47f3f47baa1f38de2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        //将AMap存入data 便于全局访问AMap
        this.AMap=AMap
        this.map = new AMap.Map("main", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 11, //初始化地图级别
          center: [116.397202, 39.905075] //初始化地图中心点位置
        });
        // 为地图对象绑定点击事件
        this.map.on("click", e => {
          let lng = e.lnglat.getLng();
          let lat = e.lnglat.getLat();
          console.log(`经纬度：[${lng}, ${lat}]`);
          // 调用高德地图的web服务接口，查询当前经纬度的坐标
          let geocoder = new AMap.Geocoder();
          geocoder.getAddress([lng, lat], (status, result) => {
            console.log(status, result);
            // 将数据回填到表单
            let info = result.regeocode.addressComponent;
            this.form.address = result.regeocode.formattedAddress;
            this.form.city = info.city;
            this.form.province = info.province;
            this.form.district = info.district;
            this.form.latitude = lat;
            this.form.longitude = lng;
          });
        });
        // 初始化数据
    this.initData()
      });
      
    }
  },
  
  mounted () {
    // 初始化地图
    this.initMap()
    
  },
};
</script>

<style lang="scss" scoped>

</style>